<script setup lang="ts">
import { ref, computed, inject } from 'vue';
import { 
NdButton, 
NdSvgIcon, 
NdTextInput, 
NdScrollContainer, 
NdPopOver 
} from '../src/index';
import { NdIconAdd, NdIconHome } from '../src/icons';

import '../src/assets/scss/index.scss';
const globalActions = inject('globalActions');
console.log(globalActions);
// 按钮测试
const clickCount = ref(0);
const loading = ref(false);

const handleClick = () => {
clickCount.value++;
};

const toggleLoading = () => {
loading.value = !loading.value;
};

// 输入框测试
// 输入框测试
const inputBasic = ref('');
const inputClearable = ref('测试清除功能');
const inputText = ref('');
const inputPassword = ref('');
const inputEmail = ref('');
const inputNumber = ref('');
const inputTel = ref('');
const inputMaxLength = ref('');
const inputMaxLength50 = ref('');
const inputDisabled = ref('这是禁用状态的输入框');
const inputReadonly = ref('这是只读状态的输入框');
const inputWithIcon = ref('');

// 表单数据
const formData = ref({
  username: '',
  email: '',
  password: ''
});
const submitResult = ref('');

// 邮箱验证
const isValidEmail = (email: string) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
};

// 表单验证
const isFormValid = computed(() => {
  return (
    formData.value.username.length >= 4 &&
    formData.value.email &&
    isValidEmail(formData.value.email) &&
    formData.value.password.length >= 6
  );
});

// 搜索处理
const handleSearch = () => {
  alert(`搜索内容: ${inputWithIcon.value}`);
};

// 表单提交
const handleSubmit = () => {
  if (isFormValid.value) {
    submitResult.value = `✓ 表单提交成功！用户名: ${formData.value.username}, 邮箱: ${formData.value.email}`;
    setTimeout(() => {
      submitResult.value = '';
    }, 3000);
  }
};

// 表单重置
const handleReset = () => {
  formData.value = {
    username: '',
    email: '',
    password: ''
  };
  submitResult.value = '';
};
</script>
<template>
    <div class="demo-container">
      <header class="demo-header">
        <h1>Nova Design UI 组件库</h1>
        <p>组件展示与测试</p>
      </header>
  
      <main class="demo-main">
        <!-- Button 组件测试 -->
        <section class="demo-section">
          <h2>NdButton 按钮组件</h2>
          
          <div class="demo-group">
            <h3>不同类型</h3>
            <div class="button-row">
              <NdButton type="default">默认按钮</NdButton>
              <NdButton type="primary">主要按钮</NdButton>
              <NdButton type="secondary">次要按钮</NdButton>
              <NdButton type="success">成功按钮</NdButton>
              <NdButton type="warning">警告按钮</NdButton>
              <NdButton type="error">错误按钮</NdButton>
              <NdButton type="info">信息按钮</NdButton>
            </div>
          </div>
  
          <div class="demo-group">
            <h3>朴素按钮</h3>
            <div class="button-row">
              <NdButton type="default" plain>默认按钮</NdButton>
              <NdButton type="primary" plain>主要按钮</NdButton>
              <NdButton type="secondary" plain>次要按钮</NdButton>
              <NdButton type="success" plain>成功按钮</NdButton>
              <NdButton type="warning" plain>警告按钮</NdButton>
              <NdButton type="error" plain>错误按钮</NdButton>
              <NdButton type="info" plain>信息按钮</NdButton>
            </div>
          </div>
  
          <div class="demo-group">
            <h3>禁用状态</h3>
            <div class="button-row">
              <NdButton type="primary" disabled>禁用按钮</NdButton>
              <NdButton type="primary" plain disabled>禁用朴素按钮</NdButton>
            </div>
          </div>
  
          <div class="demo-group">
            <h3>加载状态</h3>
            <div class="button-row">
              <NdButton type="primary" :loading="loading">
                {{ loading ? '加载中...' : '点击加载' }}
              </NdButton>
              <NdButton type="success" plain @click="toggleLoading">
                切换加载状态
              </NdButton>
            </div>
          </div>
  
          <div class="demo-group">
            <h3>点击事件（带涟漪效果）</h3>
            <div class="button-row">
              <NdButton type="primary" @click="handleClick">
                点击我 ({{ clickCount }})
              </NdButton>
            </div>
          </div>
        </section>
  
        <!-- SvgIcon 组件测试 -->
        <section class="demo-section">
          <h2>NdSvgIcon 图标组件</h2>
          
          <div class="demo-group">
            <h3>图标展示</h3>
            <div class="icon-row">
              <div class="icon-item">
                <nd-icon-home />
                <span>home</span>
              </div>
              <div class="icon-item">
                <NdSvgIcon name="search" />
                <span>search</span>
              </div>
              <div class="icon-item">
                <NdSvgIcon name="settings" />
                <span>settings</span>
              </div>
              <div class="icon-item">
                <NdIconAdd />
                <span>add</span>
              </div>
              <div class="icon-item">
                <NdSvgIcon name="delete" />
                <span>delete</span>
              </div>
              <div class="icon-item">
                <NdSvgIcon name="check" />
                <span>check</span>
              </div>
              <div class="icon-item">
                <NdSvgIcon name="close" />
                <span>close</span>
              </div>
            </div>
          </div>
        </section>
  
        <!-- TextInput 组件测试 -->
        <section class="demo-section">
        <h2>NdTextInput 文本输入组件</h2>
        
        <!-- 基础输入框 -->
        <div class="demo-group">
            <h3>基础输入框</h3>
            <div class="input-column">
            <NdTextInput 
                v-model="inputBasic" 
                placeholder="请输入内容" 
            />
            <p class="input-value">当前值: {{ inputBasic || '(空)' }}</p>
            </div>
        </div>

        <!-- 可清除输入框 -->
        <div class="demo-group">
            <h3>可清除输入框</h3>
            <div class="input-column">
            <NdTextInput 
                v-model="inputClearable" 
                placeholder="输入内容后可清除"
                clearable
            />
            <p class="input-value">当前值: {{ inputClearable || '(空)' }}</p>
            </div>
        </div>

        <!-- 不同类型 -->
        <div class="demo-group">
            <h3>不同输入类型</h3>
            <div class="input-column">
            <NdTextInput 
                v-model="inputText" 
                type="text"
                placeholder="文本输入 (text)" 
            />
            <NdTextInput 
                v-model="inputPassword" 
                type="password"
                placeholder="密码输入 (password)" 
                clearable
            />
            <NdTextInput 
                v-model="inputEmail" 
                type="email"
                placeholder="邮箱输入 (email)" 
            />
            <NdTextInput 
                v-model="inputNumber" 
                type="number"
                placeholder="数字输入 (number)" 
            />
            <NdTextInput 
                v-model="inputTel" 
                type="tel"
                placeholder="电话输入 (tel)" 
            />
            </div>
        </div>

        <!-- 字数限制 -->
        <div class="demo-group">
            <h3>字数限制</h3>
            <div class="input-column">
            <NdTextInput 
                v-model="inputMaxLength" 
                placeholder="最多输入20个字符"
                :maxLength="20"
                showWordLimit
                clearable
            />
            <p class="input-value">当前值: {{ inputMaxLength || '(空)' }}</p>
            
            <NdTextInput 
                v-model="inputMaxLength50" 
                placeholder="最多输入50个字符"
                :maxLength="50"
                showWordLimit
            />
            </div>
        </div>

        <!-- 禁用和只读 -->
        <div class="demo-group">
            <h3>禁用和只读状态</h3>
            <div class="input-column">
            <NdTextInput 
                v-model="inputDisabled" 
                placeholder="禁用状态"
                disabled
            />
            <NdTextInput 
                v-model="inputReadonly" 
                placeholder="只读状态"
                readonly
            />
            <p class="input-hint">只读状态可以聚焦但不能修改，禁用状态无法聚焦</p>
            </div>
        </div>

        <!-- 自定义后缀插槽 -->
        <div class="demo-group">
            <h3>自定义后缀图标</h3>
            <div class="input-column">
            <NdTextInput 
                v-model="inputWithIcon" 
                placeholder="搜索内容"
            >
                <template #suffix>
                <NdSvgIcon name="search" style="cursor: pointer;" @click="handleSearch" />
                </template>
            </NdTextInput>
            <p class="input-value">搜索值: {{ inputWithIcon || '(空)' }}</p>
            </div>
        </div>

        <!-- 表单验证示例 -->
        <div class="demo-group">
            <h3>表单验证示例</h3>
            <div class="input-column">
            <div class="form-item">
                <label>用户名 (4-16个字符):</label>
                <NdTextInput 
                v-model="formData.username" 
                placeholder="请输入用户名"
                :maxLength="16"
                clearable
                />
                <span v-if="formData.username && formData.username.length < 4" class="error-msg">
                用户名至少4个字符
                </span>
                <span v-else-if="formData.username && formData.username.length >= 4" class="success-msg">
                ✓ 用户名格式正确
                </span>
            </div>

            <div class="form-item">
                <label>邮箱:</label>
                <NdTextInput 
                v-model="formData.email" 
                type="email"
                placeholder="请输入邮箱"
                clearable
                />
                <span v-if="formData.email && !isValidEmail(formData.email)" class="error-msg">
                请输入有效的邮箱地址
                </span>
                <span v-else-if="formData.email && isValidEmail(formData.email)" class="success-msg">
                ✓ 邮箱格式正确
                </span>
            </div>

            <div class="form-item">
                <label>密码 (至少6位):</label>
                <NdTextInput 
                v-model="formData.password" 
                type="password"
                placeholder="请输入密码"
                :maxLength="32"
                clearable
                />
                <span v-if="formData.password && formData.password.length < 6" class="error-msg">
                密码至少6个字符
                </span>
                <span v-else-if="formData.password && formData.password.length >= 6" class="success-msg">
                ✓ 密码长度符合要求
                </span>
            </div>

            <div class="button-row" style="margin-top: 20px;">
                <NdButton 
                type="primary" 
                :disabled="!isFormValid"
                @click="handleSubmit"
                >
                提交表单
                </NdButton>
                <NdButton type="default" @click="handleReset">
                重置
                </NdButton>
            </div>

            <div v-if="submitResult" class="submit-result">
                {{ submitResult }}
            </div>
            </div>
        </div>
        </section>
  
        <!-- ScrollContainer 组件测试 -->
        <section class="demo-section">
          <h2>NdScrollContainer 滚动容器组件</h2>
          
          <div class="demo-group">
            <h3>滚动容器示例</h3>
            <div class="demo-group-container" style="height: 300px; border: 1px solid #ddd; border-radius: 8px;">
                <NdScrollContainer>
                    <div style="padding: 20px;">
                        <p v-for="i in 50" :key="i" style="padding: 10px 0; border-bottom: 1px solid #f0f0f0;">
                        滚动内容项 {{ i }}
                        </p>
                    </div>
                </NdScrollContainer>
            </div>
          </div>
        </section>
  
        <!-- PopOver 组件测试 -->
        <section class="demo-section">
          <h2>NdPopOver 弹出层组件</h2>
          
          <div class="demo-group">
            <h3>弹出层示例</h3>
            <div class="button-row">
              <NdPopOver>
                <template #trigger>
                  <NdButton type="primary">点击弹出</NdButton>
                </template>
                <div style="padding: 15px; min-width: 200px;">
                  <p>这是弹出层内容</p>
                  <p>可以放置任意内容</p>
                </div>
              </NdPopOver>
            </div>
          </div>
        </section>
      </main>
    </div>
</template>
<style scoped>
.demo-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.demo-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
border-radius: 12px;
margin-bottom: 30px;
text-align: center;
}

.demo-header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}

.demo-header p {
font-size: 1.2em;
opacity: 0.9;
}

.demo-main {
display: flex;
flex-direction: column;
gap: 30px;
}

.demo-section {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.demo-section h2 {
font-size: 1.8em;
margin-bottom: 20px;
color: #333;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
}

.demo-group {
margin-bottom: 30px;
}

.demo-group:last-child {
margin-bottom: 0;
}

.demo-group h3 {
font-size: 1.2em;
margin-bottom: 15px;
color: #666;
}

.button-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.icon-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.icon-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
min-width: 80px;
}

.icon-item span {
font-size: 0.9em;
color: #666;
}

.input-column {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 400px;
}

.input-value {
color: #666;
font-size: 0.9em;
}
</style>